一、hooks: 什么叫大势所趋?
2019 年年初，react 在 16.8.x 版本正式具备了 hooks 能力。
2019 年 6 月，尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。（vue hooks 的基础）
在后续的 react 和 vue3 相关版本中，相关 hooks 能力都开始被更多人所接受。
除此之外，solid.js、 preact 等框架，也是开始选择加入 hooks 大家庭
可以预见，虽然目前仍然是 class Component 和 hooks api 并驾齐驱的场面，但未来几年里，hooks 极有可能取代 class Component 成为业内真正的主流
二、什么是 hooks ?
2.1 hooks 的定义
"hooks" 直译是 " 钩子 "，它并不仅是 react ，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：
系统运行到某一时期时，会调用被注册到该时机的回调函数。
比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。
以上这些，都可以被称一声 "hook"。但是很显然，在特定领域的特定话题下，hooks 这个词被赋予了一些特殊的含义。
在 react@16.x 之前，当我们谈论 hooks 时，我们可能谈论的是 " 组件的生命周期 "。
但是现在，hooks 则有了全新的含义
以 react 为例， hooks 是：
一系列以 "use" 作为开头的方法，它们提供了让你可以完全避开 class 式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。
简化一下：
一系列方法，提供了在函数式组件中完成开发工作的能力。
（记住这个关键词: 函数式组件 ）import { useState, useEffect, useCallback } from 'react'; // 比如以上这几个方法，就是最为典型的 Hooks
而在 vue 中， hooks 的定义可能更模糊，姑且总结一下：
在 vue 组合式 API 里，以 "use" 作为开头的，一系列提供了组件复用、状态管理等开发能力的方法。
（关键词： 组合式 API ）import { useSlots, useAttrs } from 'vue'; import { useRouter } from 'vue-router'; // 以上这些方法，也是 vue3 中相关的 Hook！
如： useSlots 、 useAttrs 、 useRouter 等。
如果按这个标准来看的话， vue 和 react 中 hooks 的定义，似乎都差不多。
那么为什么要提到是以 "use" 作为开头的方法呢？
2.2 命名规范 和 指导思想
在 react 官方文档里，对 hooks 的定义和使用提出了 " 一个假设、两个只在 " 核心指导思想。 （播音腔）
一个假设： 假设任何以 「use」 开头并紧跟着一个大写字母的函数就是一个 Hook
第一个只在： 只在 React 函数组件中调用 Hook，而不在普通函数中调用 Hook。（Eslint 通过判断一个方法是不是大坨峰命名来判断它是否是 React 函数）
第二个只在： 只在最顶层使用 Hook，而不要在循环，条件或嵌套函数中调用 Hook
因为是约定，因而 useXxx 的命名并非强制，你依然可以将你自定义的 hook 命名为 byXxx 或其他方式，但不推荐
三、为什么我们需要 hooks ?
3.1 更好的状态复用
当组件实例创建时，需要创建一个 state 属性： name，并随机给此 name 属性附一个初始值。除此之外，还得提供一个 setName 方法。你可以在组件其他地方开销和修改此状态属性。
3.2 代码组织
无论是 vue 还是 react, 通过 Hooks 写法都能做到，将 " 分散在各种声明周期里的代码块 "，通过 Hooks 的方式将相关的内容聚合到一起。
这样带来的好处是显而易见的：" 高度聚合，可阅读性提升 "。伴随而来的便是 " 效率提升，bug 变少 "
3.3 比 class 组件更容易理解
在 react 的 class 写法中，随处可见各种各样的 .bind(this)。（甚至官方文档里也有专门的章节描述了 " 为什么绑定是必要的？" 这一问题）
vue 玩家别笑，computed: { a: () => { this } } 里的 this 也是 undefined。
很显然，绑定虽然 " 必要 "，但并不是 " 优点 "，反而是 " 故障高发 " 地段。
但在 Hooks 写法中，你就完全不必担心 this 的问题了
3.4 友好的渐进式
渐进式的含义是：你可以一点点深入使用。
无论是 vue 还是 react，都只是提供了 Hooks API，并将它们的优劣利弊摆在了那里。并没有通过无法接受的 break change 来强迫你必须使用 Hooks 去改写之前的 class 组件。
你依然可以在项目里一边写 class 组件，一边写 Hooks 组件，在项目的演进和开发过程中，这是一件没有痛感，却悄无声息改变着一切的事情。
参考
贡献者
jiechen